<template>
  <div class="content-warning">
    <div class="my-top-warning">
      <botChart1 />
      <botChart2 />
    </div>
    <div class="my-bottom-warning">
      <topChart1 />
      <topChart3 />
    </div>
  </div>
</template>
<script>
import topChart1 from './topChart1'
import topChart2 from './topChart2'
import topChart3 from './topChart3'
import botChart1 from './botChart1'
import botChart2 from './botChart2'
export default {
  name: 'earlyWarningView',
  components: {
    topChart1,
    topChart2,
    topChart3,
    botChart1,
    botChart2
  },
  data() {
    return {
    }
  },
  methods: {}
}
</script>

<style lang="scss">
.content-warning {
  width: 100%;
  height: calc(100% - 80px);
  background-size: 100% 100%;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.my-top-warning {
  width: 100%;
  height: calc(50% - 30px);
  margin-top: 15px;
  margin-bottom: 15px;
  box-sizing: border-box;
  position: relative;
}

.my-bottom-warning {
  width: 100%;
  height: calc(50% - 15px);
  box-sizing: border-box;
  position: relative;
}
</style>
